<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        分发管理
        <small>分发管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">分发管理</a></li>
        <li class="active">分发管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="searchName"> 店面编号</label>
                                <input type="text" class="form-control input-sm" name="shopNo" id="searchName" placeholder="请输入店面编号或名称">
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-default" onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                        <div class="btn-group btn-group-sm">
                            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                            <button shiro:hasPermission="income:create" type="button" id="addBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#addModal"><i class="glyphicon glyphicon-plus"></i> 新增
                            </button>
                            <!-- Indicates caution should be taken with this action -->
                            <button shiro:hasPermission="income:update" type="button" id="editBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#editModal"
                                    data-action="{type:'editable',form:'#editForm',table:'#table',after:'editAfter'}"
                                    disabled><i class="glyphicon glyphicon-edit"></i> 修改
                            </button>
                            <!-- Indicates a dangerous or potentially negative action -->
<!--                            <button shiro:hasPermission="income:delete" type="button" id="deleteBtn" class="btn btn-default" data-toggle="modal"
                                    data-target="#deleteModal"
                                    data-action="{type:'delete',form:'#deleteForm',idField:'id',table:'#table'}"
                                    disabled><i class="glyphicon glyphicon-remove"></i> 删除
                            </button>-->
                        </div>
                    </div>
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">添加收入</h4>
            </div>
            <div class="modal-body">
                <form id="addForm" >
                    <input type="hidden" id="organizationId" name="organizationId" readonly required>
                    <input type="hidden" id="areaName" name="areaName" readonly required>
                    <input type="hidden" id="userIds" name="userIds" readonly required>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="shopNo"><span class="asterisk">*</span>编号:</label>
                        <div class="col-sm-4">
                            <input  type="text" class="typeahead" id="shopNo" name="shopNo" data-provide="typeahead" placeholder="门店编号">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="shopName"><span class="asterisk">*</span>门店:</label>
                            <div class="col-sm-4">
                                <input id="shopName" type="text" class="form-control" name="shopName" placeholder="门店"
                                       minlength="3">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span class="asterisk">*</span>区域:</label>
                        <div class="col-sm-4">
                            <select class="form-control select" name="areaId" data-placeholder="请从列表选择一项" required>
                                <option th:each="area: ${areaList}" th:value="${area.id}" th:text="${area.name}">区域不存在</option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                        <label class="col-sm-2 control-label" for="stars"><span class="asterisk">*</span>星级:</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="stars" id="stars">
                                <option value="8" >8星</option>
                                <option value="7" >7星</option>
                                <option value="6" >6星</option>
                                <option value="5" selected>5星</option>
                                <option value="4">4星</option>
                                <option value="3">3星</option>
                                <option value="2">2星</option>
                                <option value="1">1星</option>
                                <option value="0">无星级</option>
                            </select>
                            <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="users"><span
                                class="asterisk">*</span>在岗人员</label>
                        <div class="col-sm-10">
                            <!--<textarea class="form-control" id="users"  rows="3" placeholder="人员列表 ..." disabled></textarea>-->
                            <input type="text" class="form-control" id="users"
                                   name="users" placeholder="在岗人数" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="paymentPiece"><span
                                class="asterisk">*</span>计件酬金:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                    <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="paymentPiece"
                                         name="paymentPiece" placeholder="记件酬金"
                                       required>
                                    <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="valuePresent"><span
                                class="asterisk">*</span>现值:</label>
                        <div class="col-sm-10 ">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="valuePresent" name="valuePresent" placeholder="现值">
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="valueallowance"><span
                                class="asterisk">*</span>达标店补:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control"  id="valueallowance" name="allowance" placeholder="店补" />
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="valueStore"><span class="asterisk">*</span>储值产值:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="valueStore" name="valueStore" placeholder="储值产值" required>
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                     <div class="form-group">
                            <label class="col-sm-2 control-label" for="valueCooper"><span class="asterisk">*</span>工号产值:</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon">&yen</span>
                                    <input type="text" class="form-control" id="valueCooper" name="valueCooper" placeholder="工号产值" required>
                                    <span class="input-group-addon">.00元</span>
                                </div>
                                <div class="help-block with-errors"></div>
                            </div>
                      </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="total"><span class="asterisk">*</span>合计:</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <span class="input-group-addon">&yen</span>
                                    <input type="text" class="form-control" id="total" name="total" placeholder="合计" required readonly>
                                    <span class="input-group-addon">.00元</span>
                                </div>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'@{/finance/income/create}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!-- edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">修改收入</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden"  name="id" readonly required>
                    <input type="hidden"  name="organizationId" readonly required>
                    <input type="hidden"  name="areaName" readonly required>
                    <input type="hidden"  name="userIds" readonly required>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editshopNo"><span class="asterisk">*</span>编号:</label>
                        <div class="col-sm-4">
                            <input  type="text" class="typeahead" id="editshopNo" name="shopNo" data-provide="typeahead" placeholder="门店编号">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="editshopName"><span class="asterisk">*</span>门店:</label>
                            <div class="col-sm-4">
                                <input id="editshopName" type="text" class="form-control" name="shopName" placeholder="门店"
                                       minlength="3">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span class="asterisk">*</span>区域:</label>
                        <div class="col-sm-4">
                            <select class="form-control select" id="editareaId" name="areaId" data-placeholder="请从列表选择一项" required>
                                <option th:each="area: ${areaList}" th:value="${area.id}" th:text="${area.name}">区域不存在</option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label" for="editstars"><span class="asterisk">*</span>星级:</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="stars" id="editstars">
                            <option value="8" >8星</option>
                            <option value="7" >7星</option>
                            <option value="6" >6星</option>
                            <option value="5" selected>5星</option>
                            <option value="4">4星</option>
                            <option value="3">3星</option>
                            <option value="2">2星</option>
                            <option value="1">1星</option>
                            <option value="0">无星级</option>
                        </select>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editusers"><span
                                class="asterisk">*</span>在岗人员</label>
                        <div class="col-sm-10">
                            <!--<textarea class="form-control" id="editusers"  rows="3" placeholder="人员列表 ..." disabled></textarea>-->
                            <input type="text" class="form-control" id="editusers"
                            name="users" placeholder="在岗人数" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editpaymentPiece"><span
                                class="asterisk">*</span>计件酬金:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="editpaymentPiece"
                                       name="paymentPiece" placeholder="记件酬金"
                                       required>
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editvaluePresent"><span
                                class="asterisk">*</span>现值:</label>
                        <div class="col-sm-10 ">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="editvaluePresent" name="valuePresent" placeholder="现值">
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editvalueallowance"><span
                                class="asterisk">*</span>达标店补:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control"  id="editvalueallowance" name="allowance" placeholder="店补" />
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editvalueStore"><span class="asterisk">*</span>储值产值:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="editvalueStore" name="valueStore" placeholder="储值产值" required>
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="editvalueCooper"><span class="asterisk">*</span>工号产值:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="editvalueCooper" name="valueCooper" placeholder="工号产值" required>
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edittotal"><span class="asterisk">*</span>合计:</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">&yen</span>
                                <input type="text" class="form-control" id="edittotal" name="total" placeholder="合计" required readonly>
                                <span class="input-group-addon">.00元</span>
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="editForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#editForm',url:'@{/finance/income/update}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteSmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSmallModalLabel">删除用户</h4>
            </div>
            <div class="modal-body">
                <form id="deleteForm"></form>
                确定要删除选中的 <span class="records"></span> 条记录?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="deleteForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#deleteForm',url:'@{/user/delete}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<div id="actionButtons" class="admin-hide">
    <a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"><i class="glyphicon glyphicon-heart"></i></a>　
    <a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　
</div>

<script th:inline="javascript">

    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/finance/income/list',
            cache: false,        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            exportTypes: ['excel','xlsx'],                //
            exportOptions:{
                ignoreColumn: [0,1,14]
            },
            idField: 'id',
            columns: [
                {field: 'state', checkbox: true},
               /* area_name	varchar(16)--country
                shop_no	varchar(32)--phone
                shop_name	varchar(32)---品牌
                stars	int(1)
                users	varchar(256)--主套餐
                user_ids	varchar(256)
                payment_piece	decimal(8,2)--T-2话费
                value_present	decimal(8,2)--T-1话费
                allowance	decimal(8,2) T话费*/
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'areaame', title: '区域', sortable: true, halign: 'left'},
                {field: 'shopNo', title: '用户', sortable: true, halign: 'left'},
                {field: 'shopName', title: '品牌', sortable: true, halign: 'left'},
                {field: 'users', title: '套餐', sortable: true, halign: 'left'},
               /* {field: 'userIds', title: '在岗人员', sortable: true, halign: 'left'},*/
                {field: 'paymentPiece', title: 'T-2', sortable: true, halign: 'left'},
                {field: 'valuePresent', title: 'T-1', sortable: true, halign: 'left'},
                {field: 'allowance', title: 'T月话费', sortable: true, halign: 'left'},
                /*{field: 'valueStore', title: '储值产值', sortable: true, halign: 'left'},
                {field: 'valueCooper', title: '工号产值', sortable: true, halign: 'left'},
                {field: 'total', title: '合计', sortable: true, halign: 'left'},*/
                {
                    field: 'action',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });
    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    };

    function actionFormatter(value, row, index) {
          //  console.log("执行了吗？行内修改按钮")
            return $('#actionButtons').html();
        };

    function editAfter(obj, row) {
        //console.log("修改後執行");
        <!--一个用户有几个角色,几个组-->
        /*var roleIdList = row.roleIdList;
        var groupIdList = row.groupIdList;
        for (i in roleIdList) {
            var roleId = roleIdList[i];
            $('#editForm').find('[name=roleIds]').find('option[value=' + roleId + ']').prop('selected', true);
        }
        for(i in groupIdList) {
            var groupId = groupIdList[i];
            $('#editForm').find('[name=groupIds]').find('option[value=' + groupId + ']').prop('selected', true);
        }*/
    };

    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            $('#editModal').modal('show')
            $('#editForm').fillForm(row);
            editAfter('', row);
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteModal').modal('show');
            $('.records').html('1');
            var html = '';
            for (var key in row) {
                html += '<input type="hidden" name="' + key + '" value="' + row[key] + '">';
            }
            $('#deleteForm').html(html);
        }
    };

            <!--负责人自动填充-->
            //var nameToIdMap = {};//编码对应的id
            var objArray = [];
            var $input = $(".typeahead");
            $input.typeahead({
                source: function (query, process) {
                    //query是输入的值
                    $.ajax({
                        url: "/wximp/organization/queryByName",
                        async: true,
                        cache: false,
                        type: "GET",
                        dataType: "JSON",
                        data: {name: query},
                        success: function (result) {
                            if (result.code == 200 && result.data) {
                                var array = [];
                                $.each(result.data, function (index, ele) {
                                    objArray.push(Object({
                                        id: ele.id,
                                        shopNo: ele.no,
                                        name: ele.name,
                                        areaId: ele.areaId,
                                        stars: ele.stars

                                    }));
                                    array.push(ele.name);
                                    array.push(ele.no);
                                });
                                process(array);
                            }
                        }
                    })
                },
                autoSelect: true,
                display: 'name',
                minLength: 2,//键入字数多少开始补全
                showHintOnFocus: "true",//将显示所有匹配项
                fitToElement: true,//选项框宽度与输入框一致
                items: 'all',//下拉选项中出现条目的最大数量。也可以设置为“all”
                forceSerlection: true,////限定选择的值是列表中的 一个
                autoSelect: true,//允许你决定是否自动选择第一个建议
                delay: 500,//在查找之间添加延迟
                afterSelect: function (item) {
                   // console.log("传入参数：" + item);
                    //遍历map，根据值找id
                    /*$.map(nameToIdMap,function(ele,index){
                        if (ele == item){
                          console.log("areaid="+index);
                          $("#userphone").val(index);
                        }
                    });*/
                    //遍历对象数组
                    $.each(objArray, function (i, ele) {
                        console.log("选择="+item+",ele.shoname="+ele.shopNo+"|"+i + "--" + JSON.stringify(ele));
                        if (item == ele.name || item == ele.shopNo) {
                            // $('#addForm [name="areaId"]').val(ele.areaId);
                            //$('#addForm [name="select"]').find("option[text='深圳']").attr("selected",true)
                            $('#addForm [name="areaId"]').val(ele.areaId);
                            var checkareaText = $('#addForm [name="areaId"]').find("option:selected").text(); //获取Select选择的text
                            $('#addForm [name="areaName"]').val(checkareaText);
                            $('#addForm [name="organizationId"]').val(ele.id);
                            $('#addForm [name="shopNo"]').val(ele.no);
                            $('#addForm [name="shopName"]').val(ele.name);
                            $('#addForm [name="stars"]').val(ele.stars);
                            $('#addForm [name="shopNo"]').html(ele.no);
                            $('#addForm [name="shopName"]').html(ele.name);
                            //  $("#shopName").val(ele.name);
                            $('#editForm [name="userId"]').val(ele.id);
                            $("#editphone").val(ele.phone);
                        }
                    });
                }
            });

        <!--输入框求和-->
        $("input[id^='value']").change(function() {
            var sum = 0;
            $("input[id^='value']").each(function() {
                var r = /^-?\d+$/;　 //正整数
                if($(this).val() != '' && !r.test($(this).val())) {
                    $(this).val(""); //正则表达式不匹配置空
                } else if($(this).val() != '') {
                    sum += parseInt($(this).val());
                }
               // console.log("累计求和="+sum);
                $("#total").val(sum);
            });
        });





</script>
</html>